<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 入库管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">入库管理</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header">
    <h2 style="margin: 0;">入库管理</h2>
  </header>

  <!-- 主体内容插槽 -->
  <main>
    <!-- 添加搜索框和新增按钮 -->
    <div style="margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px;">
      <el-button type="info" size="medium" @click="logout" style="align-self: flex-end;">退出</el-button>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <el-button type="primary" size="medium" @click="showAddDialog = true">新增入库记录</el-button>
        <el-input v-model="searchQuery" placeholder="请输入批次号或备件ID" style="width: 200px;"></el-input>
      </div>
    </div>

    <!-- 表格部分 -->
    <el-table :data="paginatedInBoundRecordsList" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
      <el-table-column prop="inboundid" label="ID"></el-table-column>
      <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="batchNumber" label="批次号"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div style="display: flex; gap: 10px;">
            <el-button size="mini" type="primary" icon="EditPen" @click="editInBoundRecord(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="Delete" @click="deleteInBoundRecord(scope.row.inboundid)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分页组件 -->
    <el-pagination
      layout="prev, pager, next"
      :total="computedInBoundRecordsList.length"
      v-model:current-page="currentPage"
      :page-size="pageSize"
      style="margin-top: 20px; justify-content: center;">
    </el-pagination>

    <!-- 新增入库记录弹窗 -->
    <el-dialog v-model="showAddDialog" title="新增入库记录" width="30%">
      <el-form :model="newInBoundRecord" label-position="left" label-width="100px">
        <el-form-item label="备件ID">
          <el-input v-model="newInBoundRecord.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="newInBoundRecord.quantity"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="newInBoundRecord.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="newInBoundRecord.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="addInBoundRecord">添加</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 编辑入库记录弹窗 -->
    <el-dialog v-model="showEditDialog" title="编辑入库记录" width="30%">
      <el-form :model="editRecord" label-position="left" label-width="100px">
        <el-form-item label="ID">
          <el-input v-model="editRecord.inboundid" disabled></el-input>
        </el-form-item>
        <el-form-item label="备件ID">
          <el-input v-model="editRecord.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="editRecord.quantity"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="editRecord.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="editRecord.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="updateInBoundRecord">更新</el-button>
        </div>
      </el-form>
    </el-dialog>

  </main>

  <!-- 底部固定 -->
  <footer class="footer">
    &copy; 2025 备件管理系统 - 版权所有
  </footer>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        inBoundRecordsList: [],
        newInBoundRecord: { 
          sparepartid: null, 
          quantity: null, 
          batchNumber: '', 
          date: null,
          userid: 1  // 新增userid字段，默认值设为1
        },
        showAddDialog: false,
        // 新增编辑相关属性
        showEditDialog: false,
        editRecord: {
          inboundid: null,
          sparepartid: null, 
          quantity: null, 
          batchNumber: '', 
          date: null,
          userid: 1  // 添加userid字段以匹配后端实体类
        },
        searchQuery: '',
        currentPage: 1,
        pageSize: 10
      };
    },
    computed: {
      computedInBoundRecordsList() {
        return this.inBoundRecordsList
          .filter(record =>
            record.batchNumber.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
            record.sparepartid.toString().includes(this.searchQuery.toLowerCase())
          )
          .map((record, index) => ({
            index: index + 1,
            ...record
          }));
      },
      paginatedInBoundRecordsList() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.computedInBoundRecordsList.slice(start, end);
      }
    },
    mounted() {
      this.loadInBoundRecords();
    },
    methods: {
      async loadInBoundRecords() {
        const res = await apiClient.get('/api/inboundrecords/listall');
        this.inBoundRecordsList = res.data;
      },
      async addInBoundRecord() {
        if (!this.newInBoundRecord.sparepartid || 
            !this.newInBoundRecord.quantity || 
            !this.newInBoundRecord.batchNumber) {
          alert('请填写完整信息');
          return;
        }
        
        // 确保userid有值（实际项目应从登录信息获取）
        this.newInBoundRecord.userid = this.newInBoundRecord.userid || 1;
        
        try {
          await apiClient.post('/api/inboundrecords/insert', this.newInBoundRecord);
          // 重置表单时包含userid字段
          this.newInBoundRecord = { 
            sparepartid: null, 
            quantity: null, 
            batchNumber: '', 
            date: null,
            userid: 1  // 重置时保持userid字段
          };
          this.showAddDialog = false;
          this.loadInBoundRecords();
        } catch (error) {
          alert('添加失败: ' + error.message);
        }
      },
      cancelAdd() {
        // 重置表单时包含userid字段
        this.newInBoundRecord = { 
          sparepartid: null, 
          quantity: null, 
          batchNumber: '', 
          date: null,
          userid: 1  // 重置时保持userid字段
        };
        this.showAddDialog = false;
      },
      // 新增编辑方法
      editInBoundRecord(record) {
        // 深拷贝当前记录到editRecord
        this.editRecord = JSON.parse(JSON.stringify(record));
        this.showEditDialog = true;
      },
      async updateInBoundRecord() {
        if (!this.editRecord.sparepartid || 
            !this.editRecord.quantity || 
            !this.editRecord.batchNumber) {
          alert('请填写完整信息');
          return;
        }
        
        // 确保userid有值（实际项目应从登录信息获取）
        this.editRecord.userid = this.editRecord.userid || 1;
        
        try {
            await apiClient.put(`/api/inboundrecords/update/${this.editRecord.inboundid}`, this.editRecord);
            this.showEditDialog = false;
          this.loadInBoundRecords();
        } catch (error) {
          alert('更新失败: ' + error.message);
        }
      },
      cancelEdit() {
        this.showEditDialog = false;
        // 重置编辑表单
        this.editRecord = {
          inboundid: null,
          sparepartid: null, 
          quantity: null, 
          batchNumber: '', 
          date: null,
          userid: 1
        };
      },
      async deleteInBoundRecord(id) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/inboundrecords/delete/${id}`);
        this.loadInBoundRecords();
      },
      logout() {
        window.location.href = '/dashboard.html';
      }
    }
  });

  app.use(ElementPlus);
  const { EditPen, Delete } = ElementPlusIconsVue;
  app.component('EditPen', EditPen);
  app.component('Delete', Delete);
  app.mount('#app');
</script>
</body>
</html>